<template>
	<el-row :gutter="20" class="detail-container">
		<el-col :span="24">
			<el-card shadow="hover" class="detail-card">
				<el-page-header class="mb-4" icon="el-icon-arrow-left" title="返回" content="套装详情" @back="$router.go(-1)" />

				<!-- 主体内容容器 -->
				<div class="content-wrapper">
					<!-- 左侧信息区 -->
					<div class="left-content">
						<!-- 套装基础信息 -->
						<el-card shadow="never" class="info-card">
							<el-descriptions title="基础属性" :column="1" border>
								<el-descriptions-item label="套装名称">
									<div class="name-wrapper">
										<span class="name-text">{{ detailData.name }}</span>
										<el-tag :class="`grade-${detailData.grade}`" effect="dark" class="grade-tag">
											{{ getGradeLabel(detailData.grade) }}
										</el-tag>
									</div>
								</el-descriptions-item>

								<el-descriptions-item label="基础属性">
									<el-space wrap>
										<el-tag v-for="(attr, index) in detailData.attribute" :key="index" type="info" class="attr-tag">
											<span class="attr-key">{{ getAttributeLabel(attr.key) }}</span>
											<span class="attr-value">+{{ attr.value }}</span>
										</el-tag>
									</el-space>
								</el-descriptions-item>
							</el-descriptions>
						</el-card>

						<!-- 套装效果 -->
						<el-card shadow="never" class="effect-card mt-4">
							<template #header>
								<div class="card-header">
									<i class="el-icon-magic-stick"></i>
									<span>套装效果</span>
								</div>
							</template>
							<div class="effect-list">
								<div v-for="effect in sortedEffects" :key="effect.piece" class="effect-item">
									<div class="effect-header">
										<el-icon class="effect-icon"><svg-icon icon-class="suit" /></el-icon>
										<span class="piece-count">{{ effect.piece }}件套</span>
									</div>
									<div class="effect-content">{{ effect.description }}</div>
								</div>
							</div>
						</el-card>
					</div>

					<!-- 右侧装备区 -->
					<div class="right-content">
						<el-card shadow="never" class="equip-card">
							<template #header>
								<div class="card-header">
									<i class="el-icon-box"></i>
									<span>包含装备 ({{ equipList.length }}件)</span>
								</div>
							</template>
							<el-row v-loading="equipLoading" :gutter="16" class="equip-grid">
								<template v-if="equipList.length">
									<el-col v-for="equip in equipList" :key="equip.id" :xs="12" :sm="8" :md="6" class="equip-col">
										<el-card shadow="hover" class="equip-item" @click="handleDetail(equip.id)">
											<div class="card-content-wrapper">
												<img :src="equip.img" class="equip-thumb" @error="handleImageError" />
												<div class="equip-info">
													<div class="equip-header">
														<span class="equip-title">{{ equip.name }}</span>
													</div>
													<div class="equip-meta">
														<el-tag type="info" size="small" effect="plain" class="belongs-tag">
															<span class="belongs-text">{{ getBelongLabel(equip.belong) }}</span>
														</el-tag>
													</div>
													<div class="equip-attributes">
														<el-tag v-for="(value, key) in filterAttributes(equip)" :key="key" size="small" class="attribute-tag">
															{{ getAttributeLabel(key) }}+{{ value }}
														</el-tag>
													</div>
												</div>
											</div>
										</el-card>
									</el-col>
								</template>
								<el-empty v-else description="暂无装备数据" />
							</el-row>
						</el-card>
					</div>
				</div>

				<!-- 富文本描述区 -->
				<el-card shadow="never" class="description-card mt-4">
					<template #header>
						<div class="card-header">
							<i class="el-icon-notebook-2"></i>
							<span>套装描述</span>
						</div>
					</template>
					<div class="rich-content" v-html="detailData.content || '<p class=\'empty-text\'>暂无详细描述</p>'"></div>
				</el-card>
			</el-card>
		</el-col>
	</el-row>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import request from '@/utils/request'
import { ElMessage } from 'element-plus'
import router from '@/router'

const route = useRoute()
const detailData = ref({})
const equipList = ref([])
const equipLoading = ref(false)
const $route = router

// 品级配置
const gradeOptions = [
	{ value: 1, label: '凡品' },
	{ value: 2, label: '良品' },
	{ value: 3, label: '上品' },
	{ value: 4, label: '特品' },
	{ value: 5, label: '仙品' },
	{ value: 6, label: '神珍' }
]

// 装备部位映射
const belongMap = {
	1: '兵器',
	2: '葫芦',
	3: '头冠',
	4: '臂甲',
	5: '衣甲',
	6: '腿甲',
	7: '珍玩',
	8: '精魄'
}

// 属性映射
const attributeMap = {
	aggressivity: '攻击',
	critical: '暴击',
	defense: '防御',
	health: '生命',
	mana: '法力上限',
	physical: '气力上限',
	poison: '毒伤耐性',
	mine: '雷蛰耐性',
	fire: '火焚耐性',
	ice: '寒冻耐性'
}

const handleDetail = async id => {
	$route.push(`/front/equip/equipment/show?id=${id}`)
}

const getBelongLabel = key => {
	return belongMap[key] || key
}

const getGradeLabel = grade => {
	return gradeOptions.find(g => g.value === grade)?.label || '未知'
}

const getAttributeLabel = key => {
	return attributeMap[key] || key
}

const filterAttributes = equip => {
	const attributes = {}
	const attributeKeys = ['aggressivity', 'critical', 'defense', 'mana', 'fire', 'ice', 'drug', 'thunder']

	attributeKeys.forEach(key => {
		if (equip[key] > 0) {
			attributes[key] = equip[key]
		}
	})

	return attributes
}

const sortedEffects = computed(() => {
	if (!detailData.value.effect) {
		return []
	}
	return detailData.value.effect
		.map(e => ({
			piece: parseInt(e.piece),
			description: e.description
		}))
		.sort((a, b) => a.piece - b.piece)
})

const handleImageError = e => {
	e.target.src = '/public/picture/default-image.png'
}

const fetchSuitDetail = async () => {
	try {
		const { data } = await request.get(`/suit/${route.query.id}`)
		detailData.value = data

		// 转换属性格式（如果后端返回的是对象数组）
		if (data.attribute && data.attribute.length) {
			detailData.value.attribute = data.attribute.map(item => {
				const key = Object.keys(item)[0]
				return { key, value: item[key] }
			})
		}
	} catch (error) {
		ElMessage.error('套装数据加载失败')
	}
}

const fetchEquipList = async () => {
	try {
		equipLoading.value = true
		const suitId = Number(route.query.id) // 转换为数字
		if (isNaN(suitId)) {
			ElMessage.error('无效的套装ID')
			return
		}

		const { data } = await request.get('/equip/page', {
			params: {
				suitId: suitId, // 确保传递数字类型
				pageSize: 100
			}
		})
		equipList.value = data.records || []
	} catch (error) {
		ElMessage.error('装备数据加载失败')
	} finally {
		equipLoading.value = false
	}
}

onMounted(async () => {
	await fetchSuitDetail()
	await fetchEquipList()
})
</script>

<style scoped lang="scss">
.detail-container {
	margin-top: 35px;
	padding: 20px;
	background: #f5f7fa;
}

.detail-card {
	border-radius: 12px;
	:deep(.el-card__body) {
		padding: 28px;
	}
}

.content-wrapper {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 24px;
	@media (max-width: 1200px) {
		grid-template-columns: 1fr;
	}
}

.info-card {
	border-radius: 8px;
	:deep(.el-card__body) {
		padding: 20px;
	}
	.name-wrapper {
		display: flex;
		align-items: center;
		gap: 12px;
	}
	.name-text {
		font-size: 24px;
		font-weight: 600;
		color: #303133;
	}
	.attr-tag {
		height: 36px;
		padding: 0 12px;
		.attr-key {
			color: #606266;
			margin-right: 6px;
		}
		.attr-value {
			color: #409eff;
			font-weight: 500;
		}
	}
}

.effect-card {
	border-radius: 8px;
	.card-header {
		font-size: 18px;
		font-weight: 500;
		color: #303133;
		i {
			margin-right: 8px;
			color: #409eff;
		}
	}
	.effect-item {
		padding: 16px;
		background: #f8f9fa;
		border-radius: 6px;
		margin-bottom: 12px;
		&:last-child {
			margin-bottom: 0;
		}
		.effect-header {
			display: flex;
			align-items: center;
			margin-bottom: 8px;
			.effect-icon {
				color: #e6a23c;
				font-size: 18px;
				margin-right: 8px;
			}
			.piece-count {
				font-weight: 500;
				color: #303133;
			}
		}
		.effect-content {
			color: #606266;
			line-height: 1.6;
			padding-left: 26px;
		}
	}
}

.equip-card {
	border-radius: 8px;
	height: calc(100vh - 260px);
	overflow-y: auto;
	.card-header {
		font-size: 18px;
		font-weight: 500;
		color: #303133;
		i {
			margin-right: 8px;
			color: #67c23a;
		}
	}
}

.equip-item {
	height: 280px;
	cursor: pointer;
	:deep(.el-card__body) {
		height: 100%;
		padding: 16px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.card-content-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center; // 水平居中
		gap: 12px;
		height: 100%;
	}

	.equip-thumb {
		width: 80%;
		height: 120px;
		margin-bottom: 8px;
	}

	.equip-info {
		text-align: center;
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

.highlight-text {
	font-size: 24px;
	font-weight: bold;
	color: var(--el-color-primary);
}

.grade-tag {
	&.grade-1 {
		background-color: #5d5c5c;
	}
	&.grade-2 {
		background-color: #67c23a;
	}
	&.grade-3 {
		background-color: #409eff;
	}
	&.grade-4 {
		background-color: #9a35ef;
	}
	&.grade-5 {
		background-color: #e6a23c;
	}
	&.grade-6 {
		background-color: #f56c6c;
	}
}

.content-box {
	padding: 12px;
	background: #f8f9fa;
	border-radius: 4px;
	line-height: 1.6;
}

.equip-thumb {
	width: 60px;
	height: 60px;
	object-fit: contain;
	margin-right: 12px;
}

.equip-stats {
	margin-top: 12px;

	.stat-item {
		display: flex;
		justify-content: space-between;
		padding: 6px 0;
		border-bottom: 1px solid #eee;

		&:last-child {
			border-bottom: none;
		}
	}
}

.description-card {
	border-radius: 8px;
	.card-header {
		font-size: 18px;
		font-weight: 500;
		color: #303133;
		i {
			margin-right: 8px;
			color: #9a35ef;
		}
	}
	.rich-content {
		padding: 16px;
		line-height: 1.8;
		color: #606266;
		:deep(p) {
			margin: 1em 0;
		}
		:deep(img) {
			max-width: 100%;
			border-radius: 6px;
		}
		.empty-text {
			color: #909399;
			font-style: italic;
		}
	}
}

.effect-item {
	display: flex;
	align-items: center;
	padding: 12px;
	margin: 8px 0;
	background: var(--el-color-warning-light-9);
	border-radius: 4px;

	.effect-tag {
		flex-shrink: 0;
		margin-right: 12px;
	}
}

.equip-info {
	.equip-attributes {
		margin-top: 8px;
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
		justify-content: center;
	}

	.equip-header {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 6px;
		width: 100%;
		.info-icon {
			color: var(--el-color-primary);
			font-size: 16px;
			margin-right: 8px;
		}
		.equip-title {
			font-size: 15px;
			font-weight: 600;
			color: var(--el-text-color-primary);
			@media (max-width: 768px) {
				font-size: 14px;
			}
		}
	}
	.equip-meta {
		display: flex;
		justify-content: center;
		.belongs-tag {
			padding: 4px 8px;
			border-radius: 4px;
			.location-icon {
				vertical-align: middle;
				margin-right: 4px;
				font-size: 14px;
			}
			.belongs-text {
				vertical-align: middle;
				font-size: 13px;
				color: var(--el-text-color-secondary);
			}
		}
	}
}

.attribute-tag {
	height: 24px;
	line-height: 22px;
	background-color: var(--el-color-primary-light-9);
	border-color: var(--el-color-primary-light-5);
	color: var(--el-color-primary);

	&:hover {
		background-color: var(--el-color-primary-light-7);
	}
}
</style>
